<template>
    <div class="cb-drawer">
        <div v-if="open"
            :class="position === 'left' ? (open ? 'cb-drawer-open-mode': 'cb-drawer-close-mode') : ( open ? 'cb-drawer-open-mode-right': 'cb-drawer-close-mode-right')"
            @click="modeClick">
        </div>
        <div v-if="open" :class="position === 'left' ? 'cd-drawer-close-mark-left' : 'cd-drawer-close-mark-right'">点击关闭</div>
        <div :class="position === 'left' ? (open ? 'cb-drawer-open-content' : 'cb-drawer-close-content') : (open ? 'cb-drawer-open-content-right' :'cb-drawer-close-content-right') ">
            <slot></slot>
            <div :class="item.isclick ? 'nav nav_active' : 'nav'" v-for="(item,index) in data" :key="index" @click="handlemenu(item)">
                <span class="nav_title">{{ item.name }}</span>
                <span class="nav_icon"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  componentName: 'cb-drawer',
  props: {
    // 控制遮罩是否可以点击隐藏抽屉组件
    closeByOutSideClick: {
      type: Boolean,
      default: false
    },
    // 抽屉滑动方向
    position: {
      type: String,
      default: 'left'
    },
    width: {
      type: String,
      default: '50'
    },
    // 抽屉遮罩层是否显示
    open: {
      type: Boolean
    },
    data: {
      type: Array
    }
  },
  watch: {
    data (value) {
      console.log(value, 'c')
      this.data = value
    }
  },
  methods: {
    modeClick () {
      if (this.closeByOutSideClick) {
        this.$emit('update:open', false)
        this.$emit('change')
      }
    },
    handlemenu (value) {
      // var datasrc = JSON.parse(JSON.stringify(this.data))
      // datasrc.map((item) => {
      //   if (value.id === item.id) {
      //     item.isclick = true
      //   } else {
      //     item.isclick = false
      //   }
      // })
      // this.data = datasrc
      // 传送给父组件打开那个目录
      this.$emit('isflag', value.id)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~styles/index.less";
@import "~styles/variable.less";
// @import "~styles/cbdrawer.less";
.nav_active{
    background:rgba(255,243,239,1);
}
.nav{
    .w(322);
    .h(60);
    .b-radius(12);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .mb(32);
    .nav_title{
        .h(42);
        .fs(30);
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(39,39,39,1);
        .lh(42);
        .ml(14);
    }
    .nav_icon{
        .w(16);
        .h(16);
        .mr(14);
        display: inline-block;
        background: url("../assets/share/jiantou_right.png") no-repeat center;
        background-size: contain;
    }
}
.cb-drawer{
    &-close-content,&-open-content, &-close-content-right,&-open-content-right, &-close-mode ,&-open-mode,&-close-mode-right,&-open-mode-right{
        position: fixed;
        top: 0;
        height: 100%;
    }
    &-close-content,&-open-content,&-close-content-right,&-open-content-right{
        width: 50%;
        background: #fff;
        z-index: 99
    }
    &-open-mode,&-close-mode,&-close-mode-right,&-open-mode-right{
        background: #222222;
        opacity: 0.8;
        z-index: 9;
        width: 100%;
        right: 0;
        left: 0;
    }
    &-close-content{
        opacity:0;
        left: 0%;
        transform: translate3d(-100%, 0, 0);
        transition: all .5s;
    }
    &-open-content{
        opacity:1;
        left: 0%;
        transform: translate3d(0, 0, 0);
        transition:all  .5s;
    }
    &-close-content-right{
        right: -50%;
        transition: right .5s;
    }
    &-open-content-right{
        right: 0;
        transition: right .5s;
    }
    &-close-mode{
        opacity:0;
        transition: opacity .5s;
    }
    &-open-mode{
        opacity: 0.7;
        transition: opacity .5s;
    }
    &-close-mode-right{
        opacity:0;
        transition: opacity .5s;
    }
    &-open-mode-right{
        opacity: 0.7;
        transition: opacity .5s;
    }
}
.cd-drawer-close-mark-right{
    color: #FFF;
    z-index: 999;
    position: fixed;
    width: 50%;
    top: 50%;
    left: 0px;
    transform: translate(0px, -50%);
    font-size: 18px;
}
.cd-drawer-close-mark-left{
    color: #FFF;
    z-index: 999;
    position: absolute;
    width: 50%;
    top: 50%;
    right: 0px;
    transform: translate(0px, -50%);
    font-size: 18px;
}
// .cb-drawer-open-content,.cb-drawer-close-content{
//     padding: 30px 0px 0px 0px;
// }
// .cb-drawer-open-content-right,.cb-drawer-close-content-right{
//     padding: 30px 0px 0px 0px;
// }
</style>
